<template>
  <d-icon v-if="!name.includes('gt-')" v-bind="props" />
  <svg
    v-else
    class="icon"
    aria-hidden="true"
    :style="{
      fontSize: size,
      color,
      transform: `rotate(${rotate})`,
    }"
  >
    <use :xlink:href="`#${name}`" />
  </svg>
</template>

<script lang="ts" setup>
const props = withDefaults(
  defineProps<{
    name: string // 图标名称
    size?: string
    color?: string
    rotate?: string // 旋转角度
  }>(),
  {
    name: 'gt-run',
    size: '16px',
    color: 'var(--color-CG600)',
    rotate: '0deg',
  },
)
</script>

<style lang="scss" scoped>
.icon {
  display: inline-block;
}
</style>
